<template>
  <div class="img-con flex-between">
    <div class="item-con">
      <div class="img-item flex-center">
        <el-upload
          v-if="imgUrl && isShowUpload"
          ref="upload"
          class="upload-demo"
          :action="baseURL"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :show-file-list="false"
          :auto-upload="true"
          :data="uploadOtherData"
          accept="image/*"
          :before-upload="beforeUpload"
          :disabled="!isShowUpload"
          @dblclick="previewImg({ imageUrl: imgUrl })"
        >
          <!-- 主动模式 -->
          <div
            class="img-bg"
            :style="{ backgroundImage: `url(${imgUrl})` }"
          ></div>
        </el-upload>
        <!-- 被动模式 -->
        <div
          v-if="imgUrlBD && !isShowUpload"
          class="img-bg"
          :style="{ backgroundImage: `url(${imgUrlBD})` }"
          @dblclick="previewImg({ imageUrl: imgUrlBD })"
        ></div>
        <template
          v-if="(!imgUrlBD && !isShowUpload) || (!imgUrl && isShowUpload)"
        >
          <el-upload
            ref="upload"
            class="upload-demo"
            :action="baseURL"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :show-file-list="false"
            :auto-upload="true"
            :data="uploadOtherData"
            accept="image/*"
            :before-upload="beforeUpload"
            :disabled="!isShowUpload"
          >
            <div
              class="img-bg"
              :style="{ backgroundImage: `url(${imgUrlNP})` }"
            ></div>
          </el-upload>
        </template>
      </div>
      <!-- 有上传按钮形式 -->
      <!-- <el-upload
        ref="upload"
        class="upload-demo"
        :action="baseURL"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :show-file-list="false"
        :auto-upload="false"
        :data="uploadOtherData"
        accept="image/*"
        :before-upload="beforeUpload"
      >
        <el-button v-if="isShowUpload" size="small" type="primary"
          >上传本地文件</el-button
        >
      </el-upload> -->
    </div>
    <el-dialog width="100%" title="预览" :visible.sync="dialogVisible">
      <div class="preview-wrap">
        <img class="preview" :src="previewImgSRC" alt="" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    flag: {
      default: () => "1",
    },
    isShowUpload: {
      default: () => false,
    },
  },
  computed: {
    uploadOtherData() {
      return {
        sessionId: this.sessionId,
        flag: this.flag,
      };
    },
  },
  data() {
    return {
      sessionId: "",
      imgUrl: "",
      imgUrlBD: "", // 被动处理模式
      imgUrlNP: require("@/assets/images/no_photo.png"),
      baseURL: `${process.env.VUE_APP_BASE_URL}/activeImg`,
      dialogVisible: false,
      previewImgSRC: "",
    };
  },
  created() {
    var ws = new WebSocket(`${process.env.VUE_APP_SOCKET_IP}/websocket`);
    ws.onopen = () => {
      console.log("websocket链接成功", this.flag);
      ws.send(`{"passiveImage":"${this.flag}"}`);
    };
    ws.onmessage = (e) => {
      console.log("数据通信模式：", this.flag, e.data);
      let data = JSON.parse(e.data);
      if (data.event === "sessionId") {
        this.sessionId = data.data.sessionId;
      } else if (data.event === "passiveImage") {
        this.imgUrlBD = "data:image/png;base64," + data.data.base64;
      } else if (data.event === "coordinate") {
        // data.data.coordinate[3] = Math.random();
        this.$store.commit("getCoordinate", data.data.coordinate);
      } else {
        this.imgUrl = "data:image/png;base64," + data.data.base64;
        console.log(888, this.imgUrl);
      }
    };
    ws.onclose = function () {
      console.log("closed...");
    };
    ws.onerror = function () {
      console.log(this.readyState);
    };
  },
  methods: {
    previewImg(item) {
      alert(999);
      this.dialogVisible = true;
      this.previewImgSRC = item.imageUrl;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    submit() {
      this.$refs.upload.submit();
    },
    beforeUpload(file) {
      // console.log(123, file);
      const isLt50M = file.size / 1024 / 1024 < 50;

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      if (!isLt50M) {
        this.$message.error("上传头像图片大小不能超过 50MB!");
      }
      return isLt50M;
    },
  },
};
</script>

<style lang="scss" scoped>
.img-con {
  padding-bottom: 0.3rem;
  margin-top: 0.4rem;
  flex-wrap: wrap;
  .img-item {
    // width: 10.66rem;
    // height: 6rem;
    width: 11.76rem;
    height: 6.62rem;
    .img-bg {
      // width: 100%;
      // height: 100%;
      // width: 10.66rem;
      // height: 6rem;
      width: 11.76rem;
      height: 6.62rem;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }
  }
}
</style>
<style lang="scss" scoped>
.upload-demo {
  width: 11.76rem;
  height: 6.62rem;
  margin-top: 0.2rem;
  text-align: right;
}
</style>